<!-- 主营商品 -->
<template>
	<view class="container">
		<text class="title">主营商品</text>
		<view class="list">
			<view class="list-item right-icon">
				<text class="tag">舒绝饵剂</text>
				<text class="tag">盈必绝</text>
				<text class="tag">诱捕器</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding-left: 4rpx;
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		margin-top: 30rpx;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 40rpx 22rpx 0;
			margin-left: -6rpx;
			overflow: hidden;
			
			&.right-icon::before {
				position: absolute;
				top: 50%;
				right: 10rpx;
				transform: translateY(-50%);
				font-family: 'iconfont';
				content: '\e61a';
				font-size: 24rpx;
				color: #222222;
			}
			
			.tag {
				height: 54rpx;
				font-size: 24rpx;
				color: #222222;
				line-height: 54rpx;
				background: #F2F2F4;
				border-radius: 30rpx;
				padding: 0 28rpx;
				margin-top: 24rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>